<template>
  <BasicDrawer
    isDetail
    :wrapClassName="prefixCls"
    :destroyOnClose="true"
    :showFooter="false"
    :title="getTitle"
    v-bind="$attrs"
    @register="registerDrawer"
    @ok="handleSubmit"
    @close="handleClose"
    :headerStyle="{
      display: 'none',
    }"
  >
    <template #title>
      {{ getTitle }}
    </template>
    <PageWrapper dense contentFullHeight>
      <div class="info-box h-full" v-if="refresh">
        <template v-if="isComplexRef">
          <component
            :preview="false"
            isUpdate
            detail
            :is="componentItem"
            v-model:active="activePage"
            :pageType="complexDataRef.pageType"
            :dataSource="complexDataRef.modelList"
            :buttons="complexDataRef.buttons"
            :record="modalParams.record"
            :moduleId="modalParams.moduleId"
          />
        </template>
        <component
          v-else
          :record="record"
          @register="register"
          :is="componentItem"
          :closeModal="handleClose"
          @success="handleSuccess"
          :allData="allData"
          :setModalProps="setDrawerProps"
          :modalParams="modalParams"
          :params="modalParams.params"
          :modelId="modalParams.modelId"
          :moduleId="modalParams.moduleId"
        />
      </div>
      <template #rightFooter>
        <a-button @click="handleClose">返回</a-button>
      </template>
    </PageWrapper>
  </BasicDrawer>
</template>

<script setup lang="ts">
  import { ref, Ref, markRaw } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { CustomFormRegister } from '../../types/custom';
  import { PageWrapper } from '/@/components/Page';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useComponent } from './useComponent';

  const { prefixCls } = useDesign('table-info');

  const emit = defineEmits(['success', 'register', 'cancel']);
  let getTitle: Ref<string | undefined> = ref();
  const record = ref(null);
  const allData = ref(null);
  // let width: Ref<string> = ref('50%');
  let componentItem: Ref<any> = ref('');
  const refresh = ref(false);
  const isComplexRef = ref(false);
  const complexDataRef = ref<Indexable>({});
  const modalParams = ref<Indexable>({});
  const activePage = ref(0);

  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    record.value = data.data;
    allData.value = data;

    refresh.value = true;
    const {
      moduleId,
      dataModelId,
      dynamicParams,
      record: rowRecord,
      params,
      title,
      parentModel,
    } = data.btnItem || {};

    modalParams.value = {
      moduleId,
      modelId: dataModelId,
      dynamicParams,
      preview: false,
      isUpdate: true,
      record: rowRecord,
      params,
      title,
      parentModel,
    };
    setDrawerProps({
      loading: true,
      confirmLoading: true,
    });

    const { component, isComplex, complexData } = await useComponent(data.btnItem);

    componentItem.value = markRaw(component);

    isComplexRef.value = isComplex;
    complexDataRef.value = complexData || {};

    getTitle.value = data.paramsObj?.title || data.btnItem.label;
    // width.value = data.width || width.value;
    setTimeout(() => {
      setDrawerProps({
        loading: false,
        confirmLoading: false,
      });
    }, 500);
  });

  function handleClose() {
    closeDrawer();
    modalParams.value = {};
    refresh.value = false;
    componentItem.value = '';

    emit('cancel');
  }
  let registerObj: any = {};
  const register = (val: CustomFormRegister) => {
    registerObj = val;
    registerObj.modalParams && setDrawerProps(registerObj.modalParams);
  };

  const handleSubmit = async () => {
    let values = await registerObj.validate();
    registerObj.submit(values);
  };

  const handleSuccess = (data) => {
    emit('success', data);
  };
</script>

<style lang="less" scoped></style>
